


import { Component,PureComponent,useState } from "react";

// class DemoA extends Component{
//     constructor(){
//         super();
//         //定义状态
//         this.state ={
//             counter:1,
//             num:0
//         }
//     }
//     add(){
//         //在react中，修改状态的唯一途径是setState来修改
//         //this.state.counter +1 表示拿到老的状态后+1，然后赋值给counter
//         //调用了setState后，会重新render  re-render 刷新
//         this.setState({
//             counter:this.state.counter+1
//         })
//     }
//     //状态改变后调用
//     componentDidUpdate(props,state){
//     //   console.log(state.num);
//     //   console.log(this.state.num);
//       console.log(state.counter);
//       console.log(this.state.counter);
//     //   if(state.num ===this.state.num){
//     //     this.setState({
//     //         num:this.state.num+1
//     //     })
//     //   }
//       if(state.counter===this.state.counter){
//         console.log("counter改变了");
//       }
       
//     }
//     componentDidMount(){
//         // console.log("componentDidMount");
//     }
//     render(){
      
//         let {counter,num} =this.state
       
        
      
//         return(
//             <div>
//                 <h1>更新了多少次{num}</h1>
//                 <h3>{counter}</h3>
//                 <button onClick={()=>this.add()} >+1</button>
//             </div>
//         )
//     }
// }
// ------------------------------------
// class DemoA extends Component{
//     //props不要去修改，只能使用，和vue一样
//     //在react中，父给子传递的任何东西都叫props
//     //porps的数据六和state的数据六不要交叉使用，必须保证俩个数据流是相互独立，互不影响
//     constructor(props){
//         super(props)//这一行代码必须是第一行
//         //在constructor中可以定义组件中的状态
//         this.state = {
//             num:1,
//             //props的数据六和state的数据流交叉使用
//             // num:props.num
//         }
//         this.setState({
//             num:666
//         })
//         this.add = this.add.bind(this)
//     }
//     add(){
//         this.setState(_=>({num:_.num+1}))
//     }
//     render(){
//         let{num} =this.state
//         return (
//             <div>
//                 <h2>类组件</h2>
//                 <h3>{num}</h3>
//                 <button onClick={this.add}>+ 1</button>
//             </div>
//         )
//     }
   
// }
// // constructor总结，
// // 1.constructor中可以定义状态
// // 2.constructor中可以绑定方法中的this
// // 3.不能调接口，不能进行DOM操作，不能开定时。。。一切和业务相关的代码都不能放在constructor中
// // 4.constructor不能调用setState
// // 5.constructor中可以得到props，需要保证props数据流和state数据流相互独立
// ------------------------------------
// class DemoA extends Component{
//     constructor(props){
//         super(props)
//         this.state = {
//         num:1
//         }
//     }
//     add(){
//         this.setState(_=>({num:_.num+1}))
//     }
//     render(){
//         let {num} =this.state
//         //这一种写法，是在render函数中直接调用setState
//         // this.setState(_=>({num:_.num+1}))
//         return(
//             <div>
//                 <h2>类组件</h2>
//                 <h3>{num}</h3>
//                 <button onClick={this.add}>+ 1</button>
//             </div>
//         )
//     }
// }
// ------------------------------------
// class DemoA extends Component{
//     constructor(props){
//         super(props)
//         this.state = {
//         num:1
//         }
//     }
//     add(){
//         this.setState(_=>({num:_.num+1}))
//     }
//     renderHn(){
//         this.setState(_=>({num:_.num+1}))
//         return <h1>我是h1</h1>

//     }
//     render(){
//         let {num} =this.state
//         //这一种写法，是在render函数中直接调用setState
//         // this.setState(_=>({num:_.num+1}))
//         return(
//             <div>
//                 <h2>类组件</h2>
//                 {/* 间接地调用setState */}
//                 <h3>{this.renderHn()}</h3>
//                 <h3>{num}</h3>
//                 <button onClick={this.add}>+ 1</button>
//             </div>
//         )
//     }
// }
// ------------------------------------
// class DemoA extends Component{
//     constructor(props){
//         super(props)
//         this.state = {
//         num:1,
//         count:0
//         }
//         this.add = this.add.bind(this)
//     }
//     add(){
//         this.setState(_=>({num:_.num+1}),()=>{
//             console.log(this.state.num+'变换了');
//         })
//     }
//    componentDidMount(){
//     console.log('componentdidmount');
//    }
//    //state 是旧值
//    componentDidUpdate(props,state){
//     console.log("componentDidUpdate...")
//     //componentDidMount中不能直接调用setstate,不然会爆栈
//     // this.setState(_=>({num:_.num+1}))
//     //去调用setState必须给一个出口，如果不给的话，就爆栈
//     console.log(state.count);
//     console.log(this.state.count);
//     // if(state.counter ===this.state.counter){
//     //     this.setState(state=>({count:state.count+1}))
//     // }
//     setTimeout(() => {
//         this.setState(state=>({count:state.count+1}))
//     }, 1000);
//    }
//     render(){
//         console.log("render被调用了");
//         let {num} =this.state
//         //这一种写法，是在render函数中直接调用setState
//         // this.setState(_=>({num:_.num+1}))
//         return(
//             <div>
//                 <h2>类组件</h2>
//                 {/* 间接地调用setState */}
//                 {/* <h3>{this.renderHn()}</h3> */}
//                 <h3>{num}</h3>
//                 <button onClick={this.add}>+ 1</button>
//             </div>
//         )
//     }
// }
// ------------------------------------
// class DemoA extends Component{
//     constructor(props){
//         super(props)
//         this.state = {
//         num:1,
//         count:0
//         }
//         this.add = this.add.bind(this)
//     }
//     add(){
//         this.setState(_=>({num:_.num+1}),()=>{
//             console.log(this.state.num+'变换了');
//         })
//     }
//    componentDidMount(){
//     console.log('componentdidmount');
//    }
//    //state 是旧值
//    componentDidUpdate(props,state){
//     console.log("componentDidUpdate...")
//     //componentDidMount中不能直接调用setstate,不然会爆栈
//     // this.setState(_=>({num:_.num+1}))
//     //去调用setState必须给一个出口，如果不给的话，就爆栈
//     console.log(state.count);
//     console.log(this.state.count);
//     //监听count以外的其他的状态变化
//     // if(state.counter ===this.state.counter){
//     //     this.setState(state=>({count:state.count+1}))
//     // }
//     // setTimeout(() => {
//     //     this.setState(state=>({count:state.count+1}))
//     // }, 1000);
//     //只监听num的变化
//     if(state.num!==this.state.num){
//         console.log('num变化了');
//         //todo
//     }
//    }
//     render(){
//         console.log("render被调用了");
//         let {num,count} =this.state
//         //这一种写法，是在render函数中直接调用setState
//         // this.setState(_=>({num:_.num+1}))
//         return(
//             <div>
//                 <h2>类组件</h2>
//                 <h2>{count}</h2>
//                 {/* 间接地调用setState */}
//                 {/* <h3>{this.renderHn()}</h3> */}
//                 <h3>{num}</h3>
//                 <button onClick={this.add}>+ 1</button>
//             </div>
//         )
//     }
// }
// ------------------------------------
// class  DemoA extends Component(){
//     constructor(props){
//         super(props)
//         this.state={
//             num:1,
//             flag:true
//         }
//     }
//     add(){
//         this.setState(_ => ({ num: _.num + 1 }))
//     }
//     //在组件中可以定义很多的状态，这些状态分为两类，
//     //  1.有的状态是参与页面的渲染，如，num
//     //  2.有的状态是部参与页面的渲染的，仅仅是进行一些业务运算
//     //为什么需要重新render，参与也买你渲染的状态变化了，才去render
//     //如果状态没有参与页面的渲染，它变化了，我们就没有必要重新render
//     //所以我们就需要一个开关来控制是否需要render，就是shouldComponentUpdate
//     //为什么要这样呢？
//         //  因为每一次render都会生成Fiber树，都会进入新Fiber树和老Fiber树的协调运算
//         //这些都是需要消耗性能。shouldComponentUpdate的目的是尽可能少的生成Fibre树
//     shouldComponentUpdate(props,state){
//         console.log('shouldComponentUpdate');
//         console.log(state);
//         //return false // 不更新
//         return  true
//         //如果返回true，表示更新，默认情况下，不写就是返回true
//     }
//     render(){
//         let {num} = this.state
//         return(
//             <div>
//                 <h2>类组件</h2>
//                 <h3>{num}</h3>
//                 <button onClick={()=>this.add()}>+1</button>
//             </div>
//         )
//     }

// }
// ------------------------------------
// //PureComponent 就可以达到shouldComponentUpdate的目的
// class  DemoA extends PureComponent(){
//     constructor(props){
//         super(props)
//         this.state={
//             num:1,
//             flag:true
//         }
//     }
//     add(){
//         this.setState(_ => ({ num: _.num + 1 }))
//     }

    
//     render(){
//         let {num} = this.state
//         return(
//             <div>
//                 <h2>类组件</h2>
//                 <h3>{num}</h3>
//                 <button onClick={()=>this.add()}>+1</button>
//             </div>
//         )
//     }

// }
// ------------------------------------
// class Fahrenheit extends  PureComponent{
//     render(){
//         return(
//             <div>
//                 <label >华式温度：</label>
//                 <input type="text" name="" id="" />
//             </div>
//         )
//     }
// }
// function Celsius(props){
  
//     let {value,onChange} = props
//     let change=(e)=>{
//         onChange(e.target.value)//调用父组件的change方法
//     }
//     return(
//         <div>
//             <label >摄式温度：</label>
//             <input type="text" name="" id="" value={value} onChange={change} />
//         </div>
//     )
// }
// function DemoA(){
//     const [temper,setTemper] = useState(0)

//     return(
        
//         <div>
//             <Fahrenheit></Fahrenheit>
//             <Celsius value={temper} onChange={val =>setTemper(val)}></Celsius>
//         </div>
//     )
// }
// ------------------------------------
// class Fahrenheit extends  PureComponent{
   
//     render(){
//         const {value,onChange} = this.props
//         let change =e=>{
//             onChange(e.target.value/2)
//         }
//         return(
//             <div>
//                 <label >华式温度：</label>
//                 <input type="text" name="" id=""  value={value*2} onChange={change}/>
//             </div>
//         )
//     }
// }
// function Celsius(props){
  
//     let {value,onChange} = props
//     let change=(e)=>{
//         onChange(e.target.value)//调用父组件的change方法
//     }
//     return(
//         <div>
//             <label >摄式温度：</label>
//             <input type="text" name="" id="" value={value} onChange={change} />
//         </div>
//     )
// }
// function DemoA(){
//     const [temper,setTemper] = useState(0)

//     return(
        
//         <div>
//             <Fahrenheit  value={temper} onChange={val =>setTemper(val)}></Fahrenheit>
//             <Celsius value={temper} onChange={val =>setTemper(val)}></Celsius>
//         </div>
//     )
// }
// ------------------------------------

class Fahrenheit extends  PureComponent{
   
    render(){
        const {value,onChange} = this.props
        let change =e=>{
            let temper = (Number(e.target.value)-32)*5/9
            onChange(Number(temper))
        }
        return(
            <div>
                <label >华式温度：</label>
                <input type="text" name="" id=""  value={value*9/5+32} onChange={change}/>
            </div>
        )
    }
}
function Celsius(props){
  
    let {value,onChange} = props
    let change=(e)=>{
        onChange(e.target.value)//调用父组件的change方法
    }
    return(
        <div>
            <label >摄式温度：</label>
            <input type="text" name="" id="" value={value} onChange={change} />
        </div>
    )
}
function DemoA(){
    const [temper,setTemper] = useState(0)

    return(
        
        <div>
            <Fahrenheit  value={temper} onChange={val =>setTemper(val)}></Fahrenheit>
            <Celsius value={temper} onChange={val =>setTemper(val)}></Celsius>
        </div>
    )
}
export default DemoA;